<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center>
        <div style="width: 90%; text-align: left;">
            <div id="herder">

            </div>
            <div id="main1">
            </div>
        </div>
    </center>

    <script>
        $(function () {
            $.ajax({
                url: "src/archive.json", success: resp => {
                    let archiveList = resp;
                    archiveList.forEach(archive => {
                        $("#main1").append($("<h2>").text(archive.title));
                        archive.data.forEach(i => {
                            // let aTime = $("<span>").text(i.articleTime);
                            //$("<a>").text(i.articleName);
                            let aTime = `<span>${i.articleTime.substring(0, 10)}</span>`;
                            let aTitle = `<a style="margin-left:20px;" target="_blank"  href=${"/#/books\\" + archive.title + "\\" + i.articleName}>${i.articleName}</a>`
                            let aDiv = $("<div>").append(aTime, aTitle).css(
                                {
                                    "font-size": "17px",
                                    "margin-bottom": "3px",
                                    // "box-shadow": "0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
                                });
                            $("#main1").append(aDiv);
                        })
                        $("#main1").append($("<hr>"));
                    });

                    // $("#main1").text(JSON.stringify(resp));
                }
            })

        })
                // axios.get("archive.json").then(resp => {
                //         let archiveList = resp.data
                //         console.log(archiveList);
                //         document.getElementById("main1").innerHTML = JSON.stringify(archiveList)
                // })
                // console.log("t1");
                // let vm2 = new Vue({
                //         el: '#main1',
                //         data: {
                //                 msg: 'Vue',
                //                 archiveList: []
                //         },
                //         methods: {
                //                 ck: function () {
                //                         console.log("click1");
                //                 }
                //         },
                //         mounted() {
                //                 console.log('002');
                //                 axios.get("archive.json").then(resp => {
                //                         console.log(this.archiveList);
                //                         console.log(resp.data);
                //                         this.archiveList = resp.data;
                //                         console.log(this.archiveList);
                //                         // document.getElementById("main12").innerHTML = JSON.stringify(resp.data)
                //                 })
                //         },
                // })
                // let aside = document.getElementsByTagName("aside")
                // console.log(aside);
                // console.log('12345');

                // window.onload = function () {
                //         console.log("002");
                //         let aside = document.getElementsByTagName("aside")
                //         console.log(aside);
                //         document.body.setAttribute("class", "close");
                //         // console.log(document.body);
                // }

    </script>
</body>

</html>